<template>
  <div>
    <el-row>
      <el-col :span="3">
        <!-- 当在某个标签自有的属性前，加一个冒号，意思：可以让这个属性的值动态加载，且直接能使用vue中定义的变量-->
        <div class="grid-content bg-purple-dark" :style="'height:'+maxheight"></div>
      </el-col>
      <el-col :span="21">
        <div class="grid-content bg-purple-light" style="height: 80px"></div>
        <div class="grid-content bg-purple-dark" :style="'height:'+secondHeight">
          <div style="background-color: #99a9bf;height: 80px"></div>
          <div style="background-color: #42b983;height: 80px"></div>
          <div style="background-color: red;height: 80px"></div>



        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  export default {
    created() {
      console.log(window.innerHeight)
    },
    computed:{
      maxheight(){
        //window.innerHeight js中内置的一个属性，获取当前浏览器界面的高度
        return window.innerHeight-100+"px"
      },
      secondHeight(){
        return window.innerHeight-100-80+"px"
      }
    }
  }
</script>
<style>
  .el-row {
    margin-bottom: 20px;

  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
